<template>
  <div :style="{ 'margin-top': top }">
    <div
      :style="{
        'padding-left': spacing,
        'padding-right': spacing,
        height: height,
      }"
      class="answerExercise"
    >
      <div class="contents">
        <p class="title">{{ titlename || "答题练习" }}</p>
        <p class="info">{{ slogan || "坚持练习，掌握知识" }}</p>
        <div class="answerOptions">
          <section class="optionsF">
            <img src="../../images/answerRank/answer_picon1.png" alt="" />
            <div class="optionType">{{ dailyInfo.title }}</div>
            <div class="optionInfo">{{ dailyInfo.subtitle }}</div>
          </section>
          <section class="optionsS">
            <img src="../../images/answerRank/answer_picon2.png" alt="" />
            <div class="optionType">{{ weekInfo.title }}</div>
            <div class="optionInfo">{{ weekInfo.subtitle }}</div>
          </section>
          <section class="optionsT">
            <img src="../../images/answerRank/answer_picon3.png" alt="" />
            <div class="optionType">{{ specialInfo.title }}</div>
            <div class="optionInfo">{{ specialInfo.subtitle }}</div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "../mixins";
import mixin from "./mixins";

export default {
  name: "answerExercisesComp",
  mixins: [mixins, mixin],
  props: {
    option: {
      type: Object,
      default: {},
    },
    isInitData: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dailyInfo: {},
      weekInfo: {},
      specialInfo: {},
      list: {},
      defaultList: {
        DTLX_MRLX: {
          title: "每日一练",
          subtitle: "",
        },
        DTLX_MZLX: {
          title: "每周一练",
          subtitle: "",
        },
        DTLX_ZXDT: {
          title: "专项答题",
          subtitle: "",
        },
      },
    };
  },
  async created() {
    if (this.isInitData) {
      await this.initData();
    } else {
      this.list = this.defaultList;
      this.dailyInfo = this.list.DTLX_MRLX;
      this.weekInfo = this.list.DTLX_MZLX;
      this.specialInfo = this.list.DTLX_ZXDT;
    }
  },
  methods: {
    setData(result) {
      this.dailyInfo = result.dataList.data.DTLX_MRLX;
      this.weekInfo = result.dataList.data.DTLX_MZLX;
      this.specialInfo = result.dataList.data.DTLX_ZXDT;
    },
  },
};
</script>

<style lang='scss'>
@import "@/styles/utility/rem.scss";
.answerExercise {
  width: rem(750);
  height: rem(412);
  .contents {
    width: 100%;
    background: #ffffff;
    border-radius: rem(16);
    margin-bottom: rem(24);
    padding: rem(20);
  position: relative; 
  
  .title {
    font-size: rem(34);
    font-family: PingFang, PingFang-SC-Bold;
    font-weight: bold;
    text-align: left;
    color: #000000;
    line-height: rem(44);
  }
  .info {
    font-size: rem(26);
    font-family: PingFang, PingFang-SC-Medium;
    font-weight: normal;
    text-align: left;
    color: #999999;
    line-height: rem(70);
  }
  .answerOptions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .optionType {
      width: 100%;
      font-size: rem(30);
      font-family: PingFang, PingFang-SC-Bold;
      font-weight: normal;
      text-align: center;
      color: #ffffff;
      margin-top: rem(120);
    }
    .optionInfo {
      width: rem(120);
      opacity: 0.8;
      font-size: rem(24);
      font-family: SourceHanSansCN, SourceHanSansCN-Regular;
      font-weight: normal;
      text-align: center;
      color: #ffffff;
      margin-left: rem(44);
      margin-top: rem(12);
    }
    section {
      width: rem(207);
      height: rem(254);
      position: relative;
      img {
        position: absolute;
        top: rem(34);
        left: rem(24);
      }
    }
    .optionsF {
      background: url("../../images/answerRank/answer_pbg1.png") no-repeat;
      background-size: 100% 100%;
      img {
        width: rem(64);
        height: rem(50);
      }
    }
    .optionsS {
      background: url("../../images/answerRank/answer_pbg2.png") no-repeat;
      background-size: 100% 100%;
      img {
        width: rem(52);
        height: rem(56);
      }
    }
    .optionsT {
      background: url("../../images/answerRank/answer_pbg3.png") no-repeat;
      background-size: 100% 100%;
      img {
        width: rem(53);
        height: rem(52);
      }
    }
  }
  }
}
</style>